<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				$("#config").click(function(){
					let n=$("#uname").val();
					alert("你的名字是："+n);
					let newname=window.prompt("请输入新名字：");
					if(newname){
						$("#uname").val(newname);
					}
					//当前选中的值：
					let chosex=$(":radio[name=sex]:checked").val();
					alert("现在选中的是："+chosex);
					//性别选中女
					let yousex=window.prompt("请输入你的性别：Male/Female","Male");
					//怎么让对应的选中,错误
					//$(":radio[name=sex]").val(yousex);
					$(":radio[name=sex][value="+yousex+"]").prop("checked",true);
					//多选框，要选中  singing dancing
					let ar=["singing","dancing"];
					alert($(":checkbox[name=like]:checked").length+"个被选择了！！！");
					for(let o of ar){
						$(":checkbox[name=like][value="+o+"]").prop("checked",true);
					}
					//下拉框，可以直接设置value
					alert("省："+$("[name=province]").val());
					
					$("[name=province]").val("fujian");
				});
			});
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com">
			<p>
				<label for="uname">姓名：</label><input id="uname" type="text" name="uname" value="未知" />
			</p>
			<p>
				性别:<input type="radio" checked name="sex" value="Male" />男
				<input type="radio" name="sex" value="Female" />女

			</p>
			<p>
				爱好:
				<input type="checkbox" name="like" value="singing" />唱歌
				<input type="checkbox" name="like" value="dancing" />跳舞
				<input type="checkbox" name="like" value="rap" />说唱
				<input type="checkbox" name="like" checked value="篮球" />篮球
				<input type="checkbox" name="like" value="打游戏" />打游戏
			</p>
			<p>
				来自哪里?
				<select name="province">
					<option value="anhui">安徽省</option>
					<option value="jiangsu">江苏省</option>
					<option value="fujian">福建省</option>
					<option value="jiangxi" selected>江西省</option>
					<option value="shandong">山东省</option>
				</select>
			</p>
			<p>
				<input type="submit" value="注册" />
				<input type="button" value="设值" id="config"/>
				<input type="reset" value="重来" />
			</p>

		</form>
	</body>
</html>
